<template>
  <div class="about">
    <div class="about-container">
      <h1><i class="fas fa-info-circle"></i> 关于待办清单</h1>
      <div class="about-content">
        <p>这是一个简单而强大的待办事项管理工具，帮助你更好地规划和完成日常任务。</p>
        
        <h2><i class="fas fa-star"></i> 主要功能</h2>
        <ul>
          <li><i class="fas fa-plus-circle"></i> 添加新的待办事项</li>
          <li><i class="fas fa-check-circle"></i> 标记任务完成状态</li>
          <li><i class="fas fa-edit"></i> 编辑已有待办事项</li>
          <li><i class="fas fa-trash-alt"></i> 删除待办事项</li>
        </ul>

        <h2><i class="fas fa-keyboard"></i> 快捷操作</h2>
        <ul>
          <li>回车键：添加/保存待办事项</li>
          <li>ESC键：取消编辑</li>
        </ul>

        <h2><i class="fas fa-code"></i> 技术栈</h2>
        <ul>
          <li>前端框架：Vue.js 2.x</li>
          <li>UI组件：Element-UI</li>
          <li>图标库：Font Awesome 5</li>
          <li>HTTP客户端：Axios</li>
          <li>后端框架：SpringBoot</li>
          <li>数据库：MySQL</li>
        </ul>




        <h2><i class="fas fa-user"></i> 作者信息</h2>
        <ul>
          <li><i class="fas fa-user-circle"></i> 作者：BDAD</li>
          <li><i class="fas fa-envelope"></i> 邮箱：bdadecbf@163.com</li>
          <li><i class="fas fa-github"></i> Gitee：https://gitee.com/BDABECBF</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<style scoped>
.about {
  padding: 20px;
}

.about-container {
  max-width: 800px;
  margin: 0 auto;
  background: white;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

h1 {
  color: #2c3e50;
  margin-bottom: 30px;
  text-align: center;
}

h2 {
  color: #42b983;
  margin: 25px 0 15px;
}

.about-content {
  line-height: 1.6;
}

ul {
  list-style: none;
  padding-left: 0;
}

li {
  margin: 10px 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

i {
  color: #42b983;
}

p {
  color: #666;
  font-size: 16px;
}
</style>
